<mat-card class="material-card-sm mt-3">
  <form role="form" novalidate [formGroup]="userPasswordForm" (ngSubmit)="updatePassword()">

    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput type="{{passwordType}}" id="inputPassword" [(ngModel)]="objUser.password" name="password" placeholder="Enter Password"
          [formControl]="userPasswordForm.controls['password']">
          <i class="icon-change-type fa {{viewPassEye}}" (click)="showPass()"></i>
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="userPasswordForm.controls['password']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>

    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput type="{{confirmPasswordType}}" placeholder="Re-enter Password" [formControl]="userPasswordForm.controls['confirmPassword']"
          #confirmPassword="ngForm">
          <i class="icon-change-type fa {{viewConfirmPassEye}}" (click)="showConfirmPass()"></i>
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="userPasswordForm.controls['confirmPassword']"></control-messages>
        </mat-error>
      </mat-form-field>
      <div *ngIf="userPasswordForm.hasError('mismatchedPasswords')&& confirmPassword.dirty">
          Passwords do not match.
      </div>
    </div>

    <div class="mb-3">
      <button type="submit" mat-raised-button color="primary">
        Save</button>
      <button type="button" (click)="triggerCancelForm()" mat-raised-button color="warn" *ngIf="showCancel">Cancel
      </button>
    </div>

  </form>
</mat-card>
